<template>
  <div class="table-section is-default">
    <el-table :data="data" border style="width: 100%">
      <el-table-column prop="region" label="区县" align="center" width="140" />
      <el-table-column
        prop="companyName"
        label="企业名称"
        min-width="260"
        align="center"
      />
      <el-table-column
        prop="address"
        label="单位地址"
        align="center"
        min-width="260"
      />
      <el-table-column label="联系电话" align="center" min-width="220">
        <template slot-scope="scope">
          <div class="contact-cell">{{ scope.row.contact }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        align="center"
        min-width="200"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  name: "DefaultTable",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style scoped lang="scss">
.table-section {
  flex: 1;
  width: 100%;
  min-height: 0;
  background-color: #fff;
  margin-top: 16px;
  border-radius: 6px;
  border: 1px solid #cbe4f9;
  box-shadow: 0 6px 14px rgba(16, 154, 255, 0.08);
  overflow: auto;
  padding: 0;

  ::v-deep .el-table {
    .el-table__header-wrapper th,
    .el-table__fixed-header-wrapper th {
      background-color: #ccedef !important;
      color: #333 !important;
    }
  }
}

.contact-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
</style>
